<template>
  <view class="container">
    <uni-swipe-action>
      <uni-swipe-action-item :right-options="options" @click="upData">
        <!-- 项目详情部分 -->
        <view class="project-details">
          <view class="project-title">项目名称: {{ project.name }}</view>
          <view class="project-dates">
            <view>开始日期:{{ project.startDate }}</view>
            <view>结束日期: {{ project.endDate }}</view>
            <view>创建人: {{ project.createdName }}</view>
          </view>
          <view class="project-status">状态:
            <dict-type typeName="project_status" :value="project.status"></dict-type>
          </view>
          <view class="task-progress-bar">
            <view class="progress" :style="{ width: getProgressWidth() }"></view>
          </view>
        </view>
      </uni-swipe-action-item>
    </uni-swipe-action>
    <!-- 选项卡 -->
    <uni-segmented-control
        :current="tabIndex"
        :values="['任务列表', '项目描述','人员管理','项目公告']"
        @clickItem="(e)=>{tabIndex = e.currentIndex;}">
    </uni-segmented-control>
    <!-- 滑动切换 -->
    <swiper :current="tabIndex" @change="(e)=>{tabIndex = e.detail.current;}" class="swiper-box">
      <!-- 任务列表 -->
      <swiper-item>
        <view class="project-description-container">
          <view class="description-title">任务</view>
          <scroll-view  scroll-y="true">
            <view v-for="task in tasks" :key="task.id" class="task-item" @click="goToDetail(task)">
              <view class="task-title">{{ task.title }}</view>
              <view class="task-status">状态:
                <dict-type typeName="task_status" :value="task.status"></dict-type>
              </view>
              <view class="task-due-date">截止日期: {{ task.dueDate || '' }}</view>
            </view>
          </scroll-view>
        </view>
      </swiper-item>
      <!-- 项目描述 -->
      <swiper-item>
        <view class="project-description-container">
          <view class="description-title">项目描述</view>
          <view class="project-description" v-html="project.description">
            <u-parse :content="content"></u-parse>
          </view>
        </view>
      </swiper-item>
      <!-- 人员管理 -->
      <swiper-item>
        <view class="project-description-container">
          <view class="description-title">人员管理</view>
          <view v-for="member in memberList" :key="member.id" class="task-item">
            <view class="task-title">名称：{{ member.userName }}</view>
            <view class="task-due-date">角色: {{ member.role }}</view>
            <view class="task-status">加入时间：{{ member.joinedAt }}</view>
          </view>
        </view>
      </swiper-item>
      <!-- 公告 -->
      <swiper-item>
        <view class="project-description-container">
          <view class="description-title">项目公告</view>
          <view v-for="notification in notificationList" :key="notification.id" class="task-item">
            <view class="task-title">标题：{{ notification.title }}</view>
            <view class="task-due-date">创建人: {{ notification.userName }}</view>
            <view class="task-status">创建时间：{{ notification.createdAt }}</view>
          </view>
        </view>
      </swiper-item>
    </swiper>

  </view>
</template>

<script>
import {delProject, getProject} from '../../../api/project/project';
import {listAllTask} from '../../../api/project/task';
import {listAllMember} from "../../../api/project/member";
import {listAllNotification} from "../../../api/project/notification";
import DictType from "../../../components/dictType/dictType.vue";

export default {
  components: { DictType},
  data() {
    return {
      memberList: [],
      notificationList:[],
      tabIndex: 1,
      options: [{
        text: '删除',
        style: {
          backgroundColor: '#007aff'
        }
      }, {
        text: '编辑',
        style: {
          backgroundColor: '#dd524d'
        }
      }],
      projectId: null,
      tasks: [],
      project: null,
    };
  },
  onLoad(options) {
    if (options.projectId) {
      this.projectId = options.projectId;
    }
  },
  mounted() {
    this.getData();
  },
  comments: {},
  methods: {
    getData() {
      getProject(this.projectId).then(res => {
        this.project = res.data;
        listAllTask({projectId: this.projectId}).then(res => {
          this.tasks = res.data;
        });
        listAllMember({projectId: this.projectId}).then(res => {
          this.memberList = res.data;
        })
        listAllNotification({projectId: this.projectId}).then(res => {
          this.notificationList = res.data;
        })
      });
    },
    formatDate(timestamp) {
      if (!timestamp) return '';
      const date = new Date(timestamp);
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
    },
    getProgressWidth() {
      let ok = 0;
      this.tasks.forEach(task => {
        if (task.status === 'over') ok++;
      })
      return ok * 100 / this.tasks.length + '%'
    },
    upData(e) {
      if (e.index === 0) {
        uni.showModal({
          title: '提示',
          content: '确定要删除该项目吗？',
          success: (res) => {
            if (res.confirm) {
              delProject(this.projectId).then(res => {
                uni.showToast({
                  title: '删除成功',
                  icon: 'success'
                });
              })
            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        });
      } else {
        uni.navigateTo({
          url: `/pages/project/upProject/upProject?projectId=${this.projectId}`
        });
      }
    },
    goToDetail(task) {
      uni.navigateTo({
        url: `/pages/project/taskInit/index?taskId=${task.id}`
      });
    }
  }
};
</script>

<style scoped>
/* 统一布局容器 */
.container {
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
  padding: 24rpx;
  min-height: 100vh;
}

/* 项目详情卡片 */
.project-details {
  padding: 24rpx;
  background: #fff;
  border-radius: 16rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.project-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.project-dates,
.project-status {
  font-size: 28rpx;
  color: #666;
  margin-top: 12rpx;
}

/* 进度条 */
.task-progress-bar {
  width: 100%;
  height: 10rpx;
  background-color: #e6e6e6;
  border-radius: 5rpx;
  margin-top: 12rpx;
}

.progress {
  height: 100%;
  background-color: #007aff;
  border-radius: 5rpx;
}


/* 滑动容器 */
.swiper-box {
	margin-top: 10rpx;
  flex: 1;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.08);
}


.task-item {
  margin-bottom: 24rpx;
  padding: 18rpx;
  background: #fff;
  border-radius: 12rpx;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.08);
}

.task-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}

.task-status,
.task-due-date {
  font-size: 28rpx;
  color: #666;
  margin-top: 8rpx;
}

/* 项目描述部分 */
.project-description-container {
  flex: 1;
  margin: 20rpx;
}

.description-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 16rpx;
  margin-left: 16rpx;
}

.project-description {
  font-size: 28rpx;
  color: #555;
  line-height: 1.8;
  word-wrap: break-word;
}

</style>